<!--
 - Author : zhuyq.
 - Date   : 2018/5/18.
 - File   : header/通用头部.
 -->

<template>
  <div>
    <el-row class="head-bar">
      <el-col :span="12" class="header-left">
        <h2>管理后台</h2>
      </el-col>
      <el-col :span="12" class="header-right">
        <div class="hello-user">
          <div class="user-avatar">
            <img src="../assets/images/icon_account.png" alt="" style="background: #ccc;">
          </div>
          <span class="hello-tip">您好，{{userName}}~</span>
        </div>
        <div class="login-out" @click="loginOut">退出</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  mounted () {
    console.log(this.userName)
  },
  methods: {
    loginOut () {
      this.$confirm('退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push('/')
      }).catch(() => {
        console.log('取消退出')
      })
    }
  },
  props: {
    userName: {type: String, default: '陈大胜'}
  }
}
</script>

<style lang="less">
  .head-bar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    padding: 0 50px;
    z-index: 1;
    background: #fff;
    .header-left {
      text-align: left;
      // padding-left: 50px;
    }
    .header-right {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      .hello-user {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex: 7;
        justify-content: flex-end;
        .user-avatar {
          padding: 8px 10px;
          margin-right: 20px;
          img {
            height: 50px;
            border-radius: 50%;
          }
        }
        .hello-tip {
          line-height: 70px;
        }
      }
      .login-out {
        flex: 3;
        line-height: 70px;
        color: #0099FF;
        cursor: pointer;
      }
    }
  }
</style>
